<template>
  <div class="category-menu">
    <NuxtLink 
      v-for="category in categories" 
      :key="category.id"
      :to="category.link"
      class="category-item"
    >
      <div class="category-icon">
        <div :class="category.icon"></div>
      </div>
      <div class="category-content">
        <h4 class="category-title">{{ category.title }}</h4>
        <p class="category-desc">{{ category.desc }}</p>
      </div>
      <i class="fas fa-chevron-right arrow-icon"></i>
    </NuxtLink>
  </div>
</template>

<script setup>
const categories = [
  {
    id: 1,
    icon: 'category-icon-1',
    title: '菌种',
    desc: '各类菌用菌种',
    link: '/products/strain'
  },
  {
    id: 2,
    icon: 'category-icon-2',
    title: '香菇',
    desc: '原料香菇、干香菇',
    link: '/products/shiitake'
  },
  {
    id: 3,
    icon: 'category-icon-3',
    title: '木耳',
    desc: '木耳、白木耳',
    link: '/products/fungus'
  },
  {
    id: 4,
    icon: 'category-icon-4',
    title: '其他菌类',
    desc: '平菇、金针菇等',
    link: '/products/others'
  },
  {
    id: 5,
    icon: 'category-icon-5',
    title: '菌棒',
    desc: '各类菌棒菇包',
    link: '/products/stick'
  },
  {
    id: 6,
    icon: 'category-icon-6',
    title: '包装材料',
    desc: '包装盒包装用品',
    link: '/products/packaging'
  }
]
</script>

<style lang="scss" scoped>
.category-menu {
  background: #fff;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
    .category-item {
      display: flex;
      align-items: center;
      padding: 20px 16px;
      text-decoration: none;
      border-bottom: 1px solid #f5f5f5;
      transition: all 0.3s ease;
      position: relative;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:hover {
        background: linear-gradient(90deg, #fef5f5 0%, #fff 100%);
        transform: translateX(5px);
        box-shadow: 2px 0 8px rgba(228, 57, 60, 0.1);
        
        .category-title {
          color: #e4393c;
        }
        
        .arrow-icon {
          transform: translateX(5px);
          color: #e4393c;
        }
      }
    
    .category-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
      
      .category-icon-1 {
        width: 24px;
        height: 24px;
        background: url('/images/category-icons/seedling.svg') no-repeat center;
        background-size: contain;
      }
      
      .category-icon-2 {
        width: 24px;
        height: 24px;
        background: url('/images/category-icons/mushroom.svg') no-repeat center;
        background-size: contain;
      }
      
      .category-icon-3 {
        width: 24px;
        height: 24px;
        background: url('/images/category-icons/leaf.svg') no-repeat center;
        background-size: contain;
      }
      
      .category-icon-4 {
        width: 24px;
        height: 24px;
        background: url('/images/category-icons/pepper.svg') no-repeat center;
        background-size: contain;
      }
      
      .category-icon-5 {
        width: 24px;
        height: 24px;
        background: url('/images/category-icons/box.svg') no-repeat center;
        background-size: contain;
      }
      
      .category-icon-6 {
        width: 24px;
        height: 24px;
        background: url('/images/category-icons/cube.svg') no-repeat center;
        background-size: contain;
      }
    }
    
    .category-content {
      flex: 1;
      min-width: 0;
      
      .category-title {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 600;
        color: #333;
        transition: all 0.3s;
      }
      
      .category-desc {
        margin: 0;
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .arrow-icon {
      font-size: 12px;
      color: #ccc;
      transition: all 0.3s;
      margin-left: 8px;
    }
  }
}
</style>
